<template>
  <div>
    <center>
    商品名称：<input type="text" v-model="res.name"><br>
    商品价格：<input type="text" v-model="res.price"><br>
    处理器： <input type="text" v-model="res.processor"><br>
    尺寸： <input type="text" v-model="res.size"><br>
    所属厂家：<input type="text" v-model="res.kind_id"><br>
    <button @click="adddian">添加</button><br><br><br>
    <table border="1px">
      <tr>
        <td>编号</td>
        <td>电脑型号</td>
      </tr>
      <tr v-for="(item,s) in list" :key="s">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
      </tr>
    </table>
    <van-pagination v-model="currentPage" :total-items="total" :items-per-page="page_size" @change="suo" />
    </center>
  </div>
</template>

<script>
export default {
  data(){
    return{
      list:{},
      res:{
        name:"",
        price:0,
        processor:"",
        size:"",
        kind_id:0
      },
      currentPage:1,
      page_size:2,
      total:0,
    }
  },
  methods:{
    adddian(){
      this.axios.post('/addcomputer?name=' + this.res.name + '&kind_id=' +  this.res.kind_id+ '&price=' +  this.res.price+ '&processor=' +  this.res.processor+ '&size=' +  this.res.size)
      .then(resp=>{
        console.log(this.res)
        alert(resp.data.msg)
      })
    },

    suo(){
      this.axios.get("/addcomputer?page=" + this.currentPage + "&page_size=" + this.page_size)
      .then(res=>{
        console.log(res)
        this.list = res.data.data
        this.total = res.data.total
      })
    }
  },
  mounted(){
    this.suo()
  }
}
</script>

<style>

</style>